{extend name="admin/public/base" /}

{block name="content"}
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    幻灯片更新
    <small></small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
    <li><a href="#">运营</a></li>
    <li class="active">幻灯片更新</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">

    <div class="box box-solid">
           <form method="post" id="form" action="" class="form-horizontal">
              <!-- Custom Tabs -->
              <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#tab_1" data-toggle="tab" aria-expanded="true">基本信息</a></li>
                  <li class=""><a href="#tab_2" data-toggle="tab" aria-expanded="false">上传图片</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">标题</label>
                                    <div class="col-sm-5">
                                        <input type="text" name="caption" value="{$data.caption}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">链接地址</label>
                                    <div class="col-sm-5">
                                        <input type="text" name="url" value="{$data.url}" class="form-control">
                                    </div>
                                </div>
                                 <div class="form-group">
                                    <label class="col-sm-2 control-label">描述内容</label>
                                    <div class="col-sm-5">
                                        <textarea class="form-control" name="content">{$data.content}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">排序</label>
                                    <div class="col-sm-2">
                                        <input type="text" name="reorder" value="{$data.reorder}" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">显示</label>
                                    <div class="col-sm-9">
                                        <label class="radio-inline">
                                            <input {eq name="data.status" value="0"}checked{/eq} type="radio" name="status" checked="true" value="0"> 显示
                                        </label>
                                        <label class="radio-inline">
                                            <input {eq name="data.status" value="1"}checked{/eq} type="radio" name="status" value="1"> 隐藏
                                        </label>
                                    </div>
                                </div>
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2">
                                <div class="box-body">
                                    <div class="form-group">
                                        <!-- /.这个容器用来存储上传的图片文件信息 -->
                                        <div id="img"> </div>
                                        <input id="files" type="file" name="files" multiple="multiple" class="file" data-preview-file-type="text">
                                    </div>
                                </div>
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <div class="box-footer">
                  <div class="col-sm-offset-2 col-sm-10">
                    <div class="btn-group">
                        <input type="hidden" name="id" value="{$data.id}">
                        <button class="btn btn-default btn-flat" type="reset">取消</button>
                        <button class="btn btn-primary btn-flat" id="submit" type="submit">保存</button>
                    </div>
                  </div>
                </div>
                <!-- /.tab-content -->
              </div>
              <!-- nav-tabs-custom -->
            </form>
    </div>

</section>
<!-- /.content -->
{/block}

{block name="js"}

<!--./上传图片-->
<link rel="stylesheet" type="text/css" href="__STATIC__/static/fileinput/css/fileinput.css">
<script type="text/javascript" src="__STATIC__/static/fileinput/js/plugins/canvas-to-blob.min.js"></script>
<script type="text/javascript" src="__STATIC__/static/fileinput/js/plugins/sortable.min.js"></script>
<script type="text/javascript" src="__STATIC__/static/fileinput/js/plugins/purify.min.js"></script>
<script type="text/javascript" src="__STATIC__/static/fileinput/js/fileinput.min.js"></script>
<script type="text/javascript" src="__STATIC__/static/fileinput/js/locales/zh.js"></script>
<script type="text/javascript">
// with plugin options
$("#files").fileinput({'showUpload':true, 
    'previewFileType':'any',
    'maxFileCount': 1,
    'language':'zh',
    'enctype':'multipart/form-data',
    'allowedFileTypes':['image'] ,//['image', 'html', 'text', 'video', 'audio', 'flash', 'object']
    'allowedFileExtensions':['jpg', 'gif', 'png'],
    'uploadUrl':"{:url('api/upload/uploadImage')}",
    'showUploadedThumbs':true,
    // for image files
    'initialPreview' : [
        {notempty name="data.image"}
        '<img src="{$data.image}" style="width:auto;height:160px;" class="file-preview-image">',
        {/notempty}
    ],
    // for image config
    'initialPreviewConfig' : [
        {notempty name="data.image"}
        {
            caption: '图片', 
            width: '120px', 
            url: "{:url('api/upload/removeImage')}", // server delete action 
            key: "{$data.image}",
            extra: {id: {$data.id}, model: 'slider'}
            //可以配置更多
        },
        {/notempty}
    ],
});

$("#files").on("fileuploaded", function (event, data, previewId, index) {
    var obj = data.response;
    var fileName = '<input type="hidden" name="image" value="'+ obj.data.saveName +'" >';
    $("#img").html(fileName);
});

$('#files').on('filesuccessremove', function(event, id) {
    // console.log('Uploaded thumbnail successfully removed');
    $("#img").empty();
});
</script>

<script>

    $(function(){

        $("#form").validate({
            rules: {
                key: {
                    required: true,
                    maxlength: 150
                },
                name: {
                    required: true,
                    maxlength: 150
                }
            },
            submitHandler: function(form) {
                <!-- alert("submitted!");
                $.ajax({
                    url:"{:url('admin/slider/update')}",
                    data:$(form).serialize(),
                    type:'post',
                    dataType:'json',
                    success:function(xhr){
                        if(xhr.code == 200){
                            swal({
                                title: xhr.msg,
                                text: "",
                                type: "success",
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                            });
                        } else{
                            swal({
                                title: xhr.msg,
                                text: "",
                                type: "error",
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                            });
                        }
                    }
                });

            }
        });

    });
</script>
{/block}